<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page language="java" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link rel="stylesheet"
	href="<c:url value="/resources/lib/bootstrap-3.3.5/css/bootstrap.min.css"/>" />
	<link href="/resources/lib/font-awesome-4.4.0/css/font-awesome.min.css"
	rel="stylesheet" type="text/css" />
		<link href="/resources/css/header.css" rel="stylesheet" type="text/css" />

<link rel="stylesheet" href="<c:url value="/resources/css/common.css"/>" />
<link rel="stylesheet"
	href="<c:url value="/resources/css/project/operationDetail.css"/>" />

<script src="<c:url value="/resources/lib/jquery-2.1.4.min.js" />"
	type="text/javascript"></script>
<script
	src="<c:url value="/resources/lib/bootstrap-3.3.5/js/bootstrap.min.js" />"
	type="text/javascript"></script>
<script
	src="<c:url value="/resources/lib/angular-1.4.7/angular.min.js"/>"
	type="text/javascript">
	
</script>
<script src="<c:url value="/resources/js/project/operationDetail.js" />"
	type="text/javascript"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Operation Detail</title>
</head>
<body ng-app="conversionTool">
<ng-include src="'/resources/viewPart/nav.html'" >
	
	</ng-include>
	<header>
		<div class="head-line">
			<h3 class="head-title">Operation Detail</h3>
		</div>
	</header>

	<section class="container" ng-controller="operationDetailCtrl">

		<form class="form-horizontal text-center">
			<div class="form-group text-center form-line">
				<div class="col-xs-4 text-right">
					<label for="projectName">Project Name</label>
				</div>
				<div class="col-xs-8">
					<input type="text" class="form-control" id="projectName" disabled
						value="${project.projectName }"
						placeholder="please enter project name">
				</div>
			</div>

			<div class="form-group text-center form-line">
				<div class="col-xs-4 text-right">
					<label for="description">Description</label>
				</div>
				<div class="col-xs-8">
					<textarea id="description" class="form-control" disabled>${project.description}</textarea>
				</div>
			</div>
		</form>



		<form role="form" id="operationDetialForm" method="post"
			action="/project/saveOperationDetail" class="form-horizontal">

			<div class="form-group text-center form-line">
				<div class="col-xs-4 text-right">
					<label for="operationName">Operation Name</label>
				</div>
				<div class="col-xs-8">
					<input type="text" class="form-control" id="operationName"
						name="operationName" value="${operation.operationName }"
						placeholder="please enter operation name">
				</div>
			</div>

			<!-- initial -->
			<div ng-init="dataAdaptorId='${ operation.dataAdaptorData.id}'" />

			<div ng-init="connectionId='${operation.soapConnectionData.id }'" />

			<div class="form-group text-center form-line">
				<div class="col-xs-4 text-right">
					<label>Data Adaptor</label>
				</div>
				<div class="col-xs-8"></div>
				</div>
				
				<div class="form-group text-center form-line">
				<div class="col-xs-4"></div>
				<div class="col-xs-8">
					<table class="table table-bordered">
						<thead>
							<tr>
								<td></td>
								<td>data adaptor Name</td>
								<td>type</td>
							</tr>
						</thead>
						<tbody>
							<c:forEach items="${dataAdaptors}" var="item">
								<tr>
									<td><input type="checkbox"
										ng-checked="${item.id}==dataAdaptorId"
										ng-click="setDataAdaptor(${item.id})" /></td>
									<td>${item.adaptorName }</td>
									<td>${item.dataType }</td>
								</tr>

							</c:forEach>
						</tbody>
					</table>
				</div>
			</div>
			
			<div class="form-group text-center form-line">
				<div class="col-xs-4 text-right">
					<label>Connection </label>
				</div>
				<div class="col-xs-8"></div>
				</div>
				
				<div class="form-group text-center form-line">
				<div class="col-xs-4"></div>
				<div class="col-xs-8">
					<table class="table table-bordered">
						<thead>
							<tr>
								<td></td>
								<td>Soap Connection Name</td>
								<td>Endpoint</td>
							</tr>
						</thead>
						<tbody>
							<c:forEach items="${connections}" var="item">
								<tr>
									<td><input type="checkbox"
										ng-checked="${item.id}==connectionId"
										ng-click="setConnectionId(${item.id})" /></td>
									<td>${item.connectionName}</td>
									<td>${item.endpoint}</td>
								</tr>
							</c:forEach>
						</tbody>
					</table>
				</div>
			</div>
			
			
			<div class="form-group text-center form-line">
				<div class="col-xs-4 text-right">
					<label for="description">Soap Payload Template</label>
				</div>
				<div class="col-xs-8"></div>
				</div>
				<div class="form-group text-center form-line">
				<div class="col-xs-4"></div>
				<div class="col-xs-8">
					<textarea id="soapTemplate" name="soapTemplate"
						class="form-control" name="soapTemplate">${ operation.soapTemplate}</textarea>
				</div>
			</div>

			<input type="hidden" name="soapConnectionID" value="{{connectionId}}" />
			<input type="hidden" name="dataAdaptorID" value="{{dataAdaptorId}}" />
			<input type="hidden" name="projectID" value="${project.id}" /> <input
				type="hidden" name="operationId" value="${operation.id}" />
			<div ng-init="operationId='${operation.id}'"></div>


			<div class="form-group text-center form-line">
			<div class="col-xs-4"></div>
			<div class="col-xs-8 text-right">
				<input type="submit" value="Edit Mapping" class="btn btn-primary" />

				<!-- 
				<input type="submit" ng-show="operationId != ''" value="view mapping" ng-click="viewMapping()" class="btn btn-primary" />
				 -->

			</div>
			</div>

			<div class="col-md-12 text-center form-group" ng-init="msg='${msg }'">
			<div class="control-group error">
			{{msg}}</div>
			</div>

		</form>
	</section>


</body>
</html>